<template>
  <div class="interview">
    <div class="wrapper flex">
      <div class="menu">
        <div class="menu-list pl-15 pt-15">
          <div
            class="active-line"
            :class="[`active-line active-line-${currentIndex}`]"
          ></div>
          <div
            v-for="(item, index) of menuList"
            :key="index"
            :class="[
              'menu-item flex-center p-15',
              { active: currentIndex === index },
            ]"
            @click="changeIndex(item, index)"
          >
            {{ item.text }}
          </div>
        </div>
      </div>

      <div class="main flex-column pt-15 ml-30">
        <div v-if="[0, 1, 2].includes(currentIndex)" class="tags flex">
          <div
            v-for="(item, index) of tagsList"
            :key="index"
            :class="[
              'tags-item c-p flex-center',
              { 'tags-active': currentTagIndex === index },
            ]"
            @click="changeTagIndex(item, index)"
          >
            {{ item.name }}
          </div>
        </div>
        <!-- 添加阴影效果 -->
        <div class="desc mt-15">
          <div class="header flex-column-center">
            <img src="./images/html.svg" />
            <a-tag color="#FC490B">html</a-tag>
          </div>
          <div class="desc-text mt-10">
            超文本标记语言，包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
          </div>
        </div>
        <div class="content-list mt-15 p-15">
          <div
            class="content-item mt-15"
            v-for="(item, index) of contentList"
            :key="index"
          >
            <div class="content">{{ index + 1 }}、{{ item.content }}</div>
          </div>

          <div class="page-down">
            <a-pagination
              v-model:current="current"
              :total="total"
              :showSizeChanger="false"
              :show-total="(total) => `共${total}条`"
            />
          </div>
        </div>
      </div>
    </div>

    <a-modal
      width="800px"
      v-model:open="dialogConfig.show"
      :title="dialogConfig.title"
    >
      <div class="title flex-column mt-15">
        <div class="label">
          <span class="label-required mr-5">*</span>
          <span>标题</span>
        </div>
        <div class="input-wrap">
          <a-input
            v-model:value="form.title"
            placeholder=""
            :style="{
              borderColor: formConfig.showTitleError ? '#f56c6c' : '',
            }"
            @input="inputChange"
          />
        </div>
        <div class="danger-text" v-if="formConfig.showTitleError">
          请输入标题
        </div>
      </div>

      <div class="title flex-column mt-15">
        <div class="label">
          <span class="label-required mr-5">*</span>
          <span>代码描述</span>
          <span class="tips ml-5">(若无代码论证则不填)</span>
        </div>
      </div>

      <div class="title flex-column mt-20">
        <div class="label">
          <span class="label-required mr-5">*</span>
          <span>回答描述</span>
          <span class="tips ml-5">(如有必要可在富文本编辑器中插入图片~)</span>
        </div>
        <div
          class="rich-text-wrap mb-20"
          :style="{
            borderColor: formConfig.showDescError ? '#f56c6c' : '',
          }"
        >
          <Toolbar
            :mode="mode"
            :defaultConfig="toolbarConfig"
            :editor="editorRef"
            style="border-bottom: 1px solid #ccc"
          />
          <Editor
            style="height: 300px; overflow-y: hidden"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
            @onChange="handleChange"
          />
        </div>
        <div
          class="danger-text"
          v-if="formConfig.showDescError"
          style="bottom: 0"
        >
          请详细描述你的问题
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, shallowRef } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

const currentIndex = ref(0);

const menuList = ref([
  {
    text: "全部",
    value: "0",
  },
  {
    text: "前端三大件",
    value: "1",
  },
  {
    text: "UI框架",
    value: "2",
  },
  {
    text: "开发框架",
    value: "3",
  },
  {
    text: "服务端",
    value: "4",
  },
  {
    text: "桌面端",
    value: "5",
  },
]);

function changeIndex(item, index) {
  currentIndex.value = index;
}

const currentTagIndex = ref(0);
function changeTagIndex(item, index) {
  currentTagIndex.value = index;
}
const tagsList = ref([
  {
    name: "Html",
  },
  {
    name: "Css",
  },
  {
    name: "Js",
  },
]);

const current = ref(1);
const total = ref(55);
const contentList = ref([
  {
    content:
      "请设计一个 combinations 函数，它接收一个数字数组，要求返回这些数字的所有可能组合情况",
  },
  {
    content:
      "请设计一个 combinations 函数，它接收一个数字数组，要求返回这些数字的所有可能组合情况",
  },
  {
    content:
      "请设计一个 combinations 函数，它接收一个数字数组，要求返回这些数字的所有可能组合情况",
  },
  {
    content:
      "请设计一个 combinations 函数，它接收一个数字数组，要求返回这些数字的所有可能组合情况",
  },
  {
    content:
      "请设计一个 combinations 函数，它接收一个数字数组，要求返回这些数字的所有可能组合情况",
  },
  {
    content:
      "请设计一个 combinations 函数，它接收一个数字数组，要求返回这些数字的所有可能组合情况",
  },
  {
    content:
      "请设计一个 combinations 函数，它接收一个数字数组，要求返回这些数字的所有可能组合情况",
  },
  {
    content:
      "请设计一个 combinations 函数，它接收一个数字数组，要求返回这些数字的所有可能组合情况",
  },
  {
    content:
      "请设计一个 combinations 函数，它接收一个数字数组，要求返回这些数字的所有可能组合情况",
  },
  {
    content:
      "请设计一个 combinations 函数，它接收一个数字数组，要求返回这些数字的所有可能组合情况",
  },
  {
    content:
      "请设计一个 combinations 函数，它接收一个数字数组，要求返回这些数字的所有可能组合情况",
  },
]);

const dialogConfig = reactive({
  show: true,
  title: "创建【Html】面试题",
});
const form = ref({});
const mode = "default";
const editorRef = shallowRef();
const valueHtml = ref(null);
const toolbarConfig = {
  excludeKeys: [
    "insertLink",
    "viewImageLink",
    "insertVideo",
    "emotion",
    // "fullScreen",
    "codeBlock",
    "todo",
  ], //排除不需要的菜单
};
const editorConfig = {
  placeholder: "请以简洁、完整的文字描述你的需求...",
  MENU_CONF: {
    insertImage: {
      onInsertedImage: (imageNode) => {
        const { src, alt, url, href } = imageNode;
        console.log("inserted image", src, alt, url, href);
      },
      checkImage: handleCheckImage,
    },
    uploadImage: {
      server: "/api/suggestion/upload",
      headers: {
        // Authorization: getLocal("plan_user_id"),
      },
      customInsert(res, insertFn) {
        insertFn(res.data.url);
      },
    },
  },
};
function handleCreated(editor) {
  console.log(editor);
  editorRef.value = editor; // 记录editor实例
}
function handleChange(value) {
  console.log(value);
  formConfig.showDescError = false;
}
function handleCheckImage(src, alt, url) {
  console.log(alt, src, url);
  return true;
}
const formConfig = ref({});
</script>

<style scoped lang="less">
@numbers: 0, 1, 2, 3, 4, 5;

each(@numbers, {
  .active-line-@{value} {
    top: 15px + @value*48px;
  }
});

.interview {
  font-size: 16px;
  height: 100%;

  .wrapper {
    padding: 0 200px;
    height: 100%;

    .menu {
      width: 120px;
      white-space: nowrap;
      border-right: 1px solid @main-color;
      height: 100%;

      &-list {
        position: relative;

        .active-line {
          position: absolute;
          width: 5px;
          height: 48px;
          left: 15px;
          border-radius: 32px 0 0 32px;
          background-color: @main-color;
          transition: top 0.5s;
        }

        .menu-item {
          height: 48px;
          font-size: 14px;
          transition: background-color 0.5s;
          cursor: pointer;

          &.active {
            background-color: #dddddd;
          }
        }
      }
    }

    .main {
      padding-bottom: 16px;

      .tags {
        width: max-content;

        &-item {
          width: 102px;
          padding: 16px 32px;
          transition: background-color 0.5s;
          border: 1px solid @border-color;
          border-right-color: transparent;

          &.tags-active {
            background-color: @main-color;
          }
        }

        &-item:last-child {
          border-right-color: @border-color;
        }
      }

      .desc {
        border: 1px solid @main-color;
        border-radius: 12px;
        width: 50%;
        padding: 16px;

        .header {
          justify-content: space-between;

          img {
            width: 36px;
            height: 36px;
          }
        }

        &-text {
          letter-spacing: 1px;
          text-indent: 32px;
          line-height: 24px;
        }
      }

      .content-list {
        flex: 1;
        overflow: auto;
        border: 1px solid @main-color;
        border-radius: 8px;
        padding-top: 0;
        position: relative;

        .page-down {
          position: absolute;
          bottom: 15px;
          right: 16px;
        }
      }
    }
  }
}
</style>
